<template>
	<el-dropdown trigger="click" @command="handleSetSize">
		<div>
			<svg-icon class-name="size-icon" icon-class="size" />
		</div>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
				{{
          item.label
				}}
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
	module.exports = {
		data() {
			return {
				sizeOptions: [
					{ label: 'Default', value: 'default' },
					{ label: 'Medium', value: 'medium' },
					{ label: 'Small', value: 'small' },
					{ label: 'Mini', value: 'mini' }
				]
			}
		},
		computed: {
			size() {
				return this.$store.getters.size
			}
		},
		methods: {
			handleSetSize(size) {
				this.$ELEMENT.size = size
				this.$store.dispatch('app/setSize', size)
				this.refreshView()
				this.$message({
					message: 'Switch Size Success',
					type: 'success'
				})
			},
			refreshView() {
				// In order to make the cached page re-rendered
				this.$store.dispatch('tagsView/delAllCachedViews', this.$route)

				const { fullPath } = this.$route

				this.$nextTick(() => {
					this.$router.replace({
						path: '/redirect' + fullPath
					})
				})
			}
		}

	}
</script>
